#cuboid{
	position: fixed;
	width:850px;
	height: 500px;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	transform-style: preserve-3d;
}
@keyframes cuboid_register
{
	from{
		transform: translateX(-50%) translateY(-50%)  rotateX(0deg);
	}
	to{
		transform: translateX(-50%) translateY(-50%) rotateX(-90deg);
	}
}
@keyframes cuboid_register_return
{
	from{
		transform: translateX(-50%) translateY(-50%)  rotateX(-90deg);
	}
	to{
		transform: translateX(-50%) translateY(-50%)  rotateX(0deg);
	}
}
/*id*/
#Login{
	display:flex;
	flex-direction:row ;
	position:absolute;
	width:850px;
	height: 500px;
	transform: translateZ(250px);
	background:white;	
}
#Login_front{
	width:600px;
	height:500px;
	position: absolute;
	background-color:rgb(255,255,255,1) ;
	display:flex;
	flex-direction:column ;
	align-items: center;
}

#Login_side_text{
	position: absolute;
	width: 250px;
	height:300px;
	display: flex;
	flex-direction:column;
	align-items: center;
	right: 0%;
}
#Login_side_bg{
	position: absolute;
	width: 250px;
	height:500px;
	background-color:skyblue;
	display: flex;
	justify-content: center;
	right: 0%;	
	z-index: 50;
}

#Login_back{
	right: 0%;
	position: absolute;
	width:600px;
	height: 500px;
	flex-direction:column;
	align-items: center;
	background-color:white;
	display:none;
	flex-direction:column ;
}
/*class*/
.Login_header_text{
	margin: 60px 0px 20px 0px;
	font-family:"calisto mt";
	font-size:30px ;
	font-weight:400 ;
	color: rgb(100,0,0,0.6);
}
.Login_bg_img{
	position: fixed;
	min-height:100%;
	min-width: 100%;	
	background-size:cover ;	
	background-repeat:no-repeat ;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
.Login_div{
	position: relative;
	height:50px;
	margin: 10px 0px 0px 0px;
}
.Login_div::after{
    content:"";
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 230px;
    border-top: 1px solid rgb(0,0,0,1);
}
.Login_input{
	ime-mode:disabled;
	width: 230px;
	height: 40px;
	background-color:transparent;
	border:none;
	outline: none;
	text-align: center;
	font-size:25px;
	color: rgb(0,0,0,0.6);
	
}
.Login_input_bg_txt{
	z-index: 0;
	position: absolute;
	color:rgb(0,0,0,0.6);
	top: 50%;
	transform: translateY(-50%);
	font-family:"楷体";
	font-size:25px;
}

.Login_feedback_font{
	margin: 10px 0px 5px 0px;
	font-family: "新宋体";
	font-size: 20px;
	text-align: center;
	color: red;
	width: 230px;
	height: 35px;
}
.Login_feedback_back{
	margin: 45px 0px 5px 0px;
	font-family: "新宋体";
	font-size: 20px;
	text-align: center;
	color: red;
	width: 230px;
	height: 35px;
}
.Login_but_SignIn{	
	margin: 0px 0px 15px 0px;
	width: 230px;
	height: 45px;
	border: none;
	background-color:firebrick ;
	color: white;
	border-radius: 50px 50px 50px 50px;
	z-index: 10;
	outline: none;
}
.Login_but_register{
	background-color:transparent;
	width: 230px;
	height: 45px;
	border: none;
	color: black;
	border: solid 1px;
	border-radius: 50px 50px 50px 50px;
	z-index: 10;
	outline: none;
}
.Login_side_header_span{
	height: 120px;
	width: 100px;
	margin: 40px 0px 0px 0px;
	writing-mode:vertical-lr;
	color: #FFFFFF;
	font-family: "楷体";
	font-size: 35px;
	z-index: 100;
}
.Login_side_content_span{
	height: 120px;
	margin: 40px 0px 0px 0px;
	color:rgb(255,255,255);
	font-family: "楷体";
	font-size:larger;
	z-index: 100;
}
.Login_side_but{
	top: 70%;
	height: 45px;
	position: relative;
	background-color:transparent;
	width: 120px;
	border: none;
	color: white;
	border: solid white 3px;
	border-radius: 50px 50px 50px 50px;
	outline: none;
}
.Login_but_Change_pwd{
	margin: 10px 0px 0px 0px;
	background-color:transparent ;
	border-top:none;
	border-left:none ;
	border-right:none ;
	color: rgb(0,0,0,0.6) ;
	border-bottom:solid rgb(0,0,0,0.3) 1px ;
	font-family:"楷体" ;
	font-size: large;
	outline: none;
}
input:active{
	background-color:rgb(0,0,100,0.2);
}
/*动画*/
@keyframes front_before
{
	from{
		left: 0%;
	}
	to{
		left: 50%;
		transform: translateX(-50%);
	}
}
@keyframes front_back
{
	from{
		left: 50%;
		transform: translateX(-50%);
	}
	to{
		left: 100%;
		transform: translateX(-100%);
	}
}
@keyframes back_before
{
	from{
		right: 0%;
	}
	to{
		right: 50%;
		transform: translateX(50%);
	}
}
@keyframes back_after
{
	from{
		right: 50%;
		transform: translateX(50%);
	}
	to{
		right: 100%;
		transform: translateX(100%);
	}
}
@keyframes front_side_text
{
	from{
		right: 0%;
	}
	to{
		left: 0%;
	}
}
@keyframes front_side_bg
{
	from{
		right: 0%;
	}
	to{
		right: 100%;
		transform:translateX(100%);
	}
}
@keyframes back_side_text
{
	from{
		left: 0%;
	}
	to{
		right: 0%;
	}
}
@keyframes back_side_bg
{
	from{
		left: 0%;
	}
	to{
		left: 100%;
		transform:translateX(-100%);
	}
}

/*浏览器内置修改*/

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #807c7c;
    transition: background-color 5000s ease-out 0.5s;
}


